<template>
	<view>
		<custom-header title="商家资料" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - 5rpx - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap">
				<view class="_wrap">
					<view class="form_wrap">
						<view class="form_item">
							<view class="label">头像</view>
							<view class="value">
								<custom-upload-tx v-model="detail.avatarId" width="100" height="100"></custom-upload-tx>
							</view>
						</view>
						<view class="form_item">
							<view class="label">地区</view>
							<view class="value">
								<!-- 云南省-昆明市-官渡区 
								<image src="/static/common/right1.png" mode="" class="right"></image> -->
								<picker mode='region' :value="value" @change="handleChangeArea">
									<view style="display: flex;align-items: center;">
										<text v-if="detail.addressCn" style="color: #333;padding-right: 10rpx;">
											{{ detail.addressCn }}
										</text>
										<text v-else style="color: #999;padding-right: 10rpx;">请选择</text>
										<image src="/static/common/right1.png" style="width: 20rpx;height: 20rpx;"></image>
									</view>
								</picker>
							</view>
						</view>
					</view>
					<view class="form_wrap">
						<view class="form_item">
							<view class="label">卖家名称</view>
							<view class="value" @click="handleEdit('shopName')">
								{{ detail.shopName }}
								<image src="/static/common/right1.png" mode="" class="right"></image>
							</view>
						</view>
						<view class="form_item">
							<view class="label">联系人姓名</view>
							<view class="value" @click="handleEdit('contactName')">
								{{ detail.name }}
								<image src="/static/common/right1.png" mode="" class="right"></image>
							</view>
						</view>
						<view class="form_item">
							<view class="label">联系人电话</view>
							<view class="value" @click="handleEdit('contactPhone')">
								{{ detail.phone }}
								<image src="/static/common/right1.png" mode="" class="right"></image>
							</view>
						</view>
						<view class="form_item">
							<view class="label">详细地址</view>
							<view class="value" @click="handleEdit('address')">
								<text class="text">{{ detail.addressCn }}{{ detail.address }}</text>
								<image src="/static/common/right1.png" mode="" class="right"></image>
							</view>
						</view>
						<view class="form_item">
							<view class="label">卖家简介</view>
							<view class="value" @click="handleEdit('introduce')">
								未填写
								<image src="/static/common/right1.png" mode="" class="right"></image>
							</view>
						</view>
						<view class="form_item">
							<view class="label">卖家实力展示</view>
							<view class="value" @click="handleEdit('image')">
								未上传图片
								<image src="/static/common/right1.png" mode="" class="right"></image>
							</view>
		
						</view>
						<view class="image_list_wrap">
							<view 
								class="image_list" 
								v-for="(img,index) in detail.imageList" 
								:key="index"
								@click="handlePreviewImage(index)">
									<up-image :show-loading="true" :src="img.url" width="100%" height="100%"></up-image>
							</view>
						</view>
					</view>
				</view>
				
		</scroll-view>
	</view>
</template>

<script setup>
	import { computed, ref, onMounted } from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	const store = useStore()
	import { objectToQueryString } from '../../utils/util.js'
	import supplierApi from '@/api/supplier'
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
	const detail = ref({
		imageList:[
			// { url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' },
			// { url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' },
			// { url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' },
			// { url:'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/index/shop.jpg' }
		]
	})
	
	// 预览图片
	const handlePreviewImage = (index)=>{
		uni.previewImage({
			current:index,
			urls:detail.value.imageList.map(item=>item.url)
		})
	}
	
	// 编辑地址
	const value = ref([])
	const handleChangeArea = (e)=>{
		console.log(e)
		const { value } = e.detail
		detail.value.area = `${value[0]} ${value[1]} ${value[2]}`
	}
	
	// 编辑信息
	const handleEdit = (name)=>{
		let params = {}
		// 卖家名称
		// if(name == 'shopName'){
		// 	params = {
		// 		field:name,
		// 		type:'input',
		// 		title:'更改卖家名称',
		// 		placeholder:'请输入卖家名称',
		// 		value:'',
		// 		id:''
		// 	}
		// }
		// 联系人姓名
		if(name == 'contactName'){
			params = {
				field:name,
				type:'input',
				title:'更改姓名',
				placeholder:'请输入联系人姓名',
				value:'',
				id:''
			}
		}
		// 联系人电话
		if(name == 'contactPhone'){
			params = {
				field:name,
				type:'input',
				title:'更改电话',
				placeholder:'请输入联系人电话',
				value:'',
				id:''
			}
		}
		// 详细地址
		if(name == 'address'){
			params = {
				field:name,
				type:'textarea',
				title:'更改地址',
				placeholder:'请输入详细地址',
				value:'',
				id:''
			}
		}
		// 卖家简介
		if(name == 'introduce'){
			params = {
				field:name,
				type:'textarea',
				title:'店铺简介',
				placeholder:'请输入店铺简介',
				value:'',
				id:''
			}
		}
		// 卖家实力展示
		if(name == 'image'){
			params = {
				field:name,
				type:'image',
				title:'上传照片',
				placeholder:'',
				value:'',
				id:''
			}
		}
		uni.navigateTo({
			url:`/pages/editInput/editInput?${objectToQueryString({...params})}`
		})
	}

	onMounted(()=>{
		getShopDetail()
	})
	
	// 获取店铺信息
	const getShopDetail = async () => {
		const response = await supplierApi.getShopDetail()
		detail.value = response
		detail.imageList = response.shopResourceList.map(item=>({ url:item.resourceId }))
	}
</script>

<style lang="scss">
	._wrap{
		padding: 0 25rpx;
	}
	.form_wrap{
		margin-top: 20rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		padding: 0 25rpx;
		font-size: 28rpx;
		color: #555555;
		.form_item{
			display: flex;
			align-items: center;
			padding: 25rpx 0;
			justify-content: space-between;
			.label{
				width: 180rpx;
			}
			.value{
				flex: 1;
				text-align: justify;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				text.text{
					display: block;
					flex: 1;
				}
				image.right{
					width: 20rpx;
					height: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
		.image_list_wrap{
			display: flex;
			flex-wrap: wrap;
			.image_list{
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-top: 25rpx;
				margin-left: 25rpx;
				&:first-child{
					margin-left: 0;
				}
				&:nth-child(3n+4){
					margin-left: 0;
				}
			}
		}
	}
</style>
